<template>
  <div v-loading="loading" class="app-container">
    <el-form
      ref="queryForm"
      :model="new_queryParam"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
          <div class="left-search">
            <el-form-item label="院区:" prop="startTime">
              <el-select
                v-model="new_queryParam.hosId"
                style="margin-right: 20px"
                placeholder="请选择院区"
                @change="changeHos"
              >
                <el-option
                  v-for="(item, index) in option"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="统计日期:" prop="startTime">
              <date-picker
                :form="new_queryParam"
                style="width: 331px"
                @changeData="changeData"
              ></date-picker>
            </el-form-item>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
          <div class="right-search">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getToTal"
            >
              查询
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="emptsearch">
              重置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="20" style="margin-bottom: 20px; min-width: 920px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
        <el-card class="box-card">
          <div class="box-card-title">近期系统总览</div>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <div class="df-center-center">
                <div class="con1-card">
                  <p>
                    归档
                    <span class="num">
                      {{ all.blackWhiteNumber + all.colorNumber || 0 }}
                    </span>
                    张
                  </p>
                </div>
              </div>
              <div
                id="chart-container"
                style="width: 100%; height: 350px"
              ></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <div class="system-card">
                <div class="con1-card con1-card3">
                  <p>
                    报告文书
                    <span class="num">{{ all.blackWhiteNumber || 0 }}</span>
                    张
                  </p>
                </div>

                <div class="con1-card con1-card4" style="width: 200px">
                  <p>
                    缴费凭证
                    <span class="num">{{ all.colorNumber || 0 }}</span>
                    张
                  </p>
                </div>

                <div class="con1-card con1-card1" style="width: 200px">
                  <p>
                    签名、印章
                    <span class="num">{{ all.colorNumber || 0 }}</span>
                    张
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <div class="df-center-center">
                <div class="con1-card con1-card4">
                  <p>
                    累计查阅导出打印
                    <span class="num">{{ all.colorNumber || 0 }}</span>
                    张
                  </p>
                </div>
              </div>
              <div
                id="chart-container3"
                style="width: 100%; height: 350px"
              ></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="10">
        <el-card class="box-card">
          <div class="box-card-title">当前储存空间</div>
          <div class="df-center storge-card">
            <div class="storge-card-box">
              <div class="con1-card con1-card1" style="min-width: 150px">
                <p>
                  总额
                  <span class="num">{{ all.blackWhiteNumber || 0 }}</span>
                  TB
                </p>
              </div>
              <div class="con1-card con1-card2" style="min-width: 150px">
                <p>
                  可用
                  <span class="num">{{ all.blackWhiteNumber || 0 }}</span>
                  TB
                </p>
              </div>
              <div class="con1-card con1-card3" style="min-width: 150px">
                <p>
                  近期使用
                  <span class="num">{{ all.blackWhiteNumber || 0 }}</span>
                  %
                </p>
              </div>
              <div class="con1-card con1-card4" style="min-width: 150px">
                <p>
                  剩余可用
                  <span class="num">{{ all.blackWhiteNumber || 0 }}</span>
                  天
                </p>
              </div>
            </div>
            <div class="chart-wrapper2">
              <div
                id="chart-container2"
                style="width: 100%; height: 410px"
              ></div>
              <!-- <el-empty class="chart-container2-no" v-if="equiVo.length == 0" description="暂无数据"></el-empty> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div class="box-card-title">近期文档总览</div>
      <div class="card-scroll-box">
        <el-row :gutter="20" style="margin-bottom: 20px; min-width: 920px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="16">
            <div>
              <div class="df-center-around" style="margin-bottom: 40px">
                <div>
                  <p class="book-card book-color1 book-radius">手动入档</p>
                </div>
                <div><p class="book-card book-radius">导入：389</p></div>
                <div class="book-radius">
                  <p class="book-card">标签归类：302</p>
                  <p class="book-card book-color1">当前待归类：28</p>
                </div>
                <div class="book-radius">
                  <p class="book-card">已归档：302</p>
                  <p class="book-card book-color1">当前待归档：28</p>
                </div>
              </div>

              <div class="df-center-around">
                <div>
                  <p class="book-card book-color2 book-radius">自动入档</p>
                </div>
                <div><p class="book-card book-radius">数据接口：389</p></div>
                <div class="book-radius">
                  <p class="book-card">正常运行：302</p>
                  <p class="book-card book-color1">当前禁用接口：28</p>
                </div>
                <div class="book-radius">
                  <p class="book-card">正常归档：302</p>
                  <p class="book-card book-color1">异常：28</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <div class="df-around">
              <div class="df-column-center file-box book-radius">
                <p class="book-card-title">档案池</p>
                <p class="book-card book2-card book-color1 book-radius">
                  档案池目录。速查
                </p>
                <p class="book-card book2-card book-color1 book-radius">
                  备份任务。管理
                </p>
                <p class="book-card book2-card book-color1 book-radius">
                  回收站。档案找回
                </p>
              </div>
              <div class="df-column-center">
                <p class="book-card book-radius book3-card book-color3">
                  查询：6321
                </p>
                <p class="book-card book-radius book3-card book-color2">
                  打印：3535
                </p>
                <p class="book-card book-radius book3-card book-color1">
                  导出：2345
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import datePicker from '@/components/datePicker/datePicker.vue'
  import { dateFormatter } from '@/utils/filters.js'
  import * as echarts from 'echarts'
  import { Loading } from 'element-ui'
  require('echarts/theme/macarons')
  export default {
    components: {
      datePicker,
    },
    data () {
      return {
        new_queryParam: {
          hosId: '',
          startTime: '',
          endTime: '',
        },
        tableData: [],
        value1: '',
        hosId: '',
        loading: false,
        centerDialogVisible: false,
        checkList: [],
        rules: {},
        all: {},
        detailLoading: false,
        option: [],
        chart: '',
        chart2: '',
        chart3: '',
        machineVoList: [],
        equiVo: [],
        deptVo: [],
      }
    },
    computed: {},
    created () {
      this.new_queryParam.startTime = dateFormatter(new Date(), 'yyyy-MM-dd')
      this.new_queryParam.endTime = dateFormatter(new Date(), 'yyyy-MM-dd')
    },
    mounted () {
      this.chart = echarts.init(document.getElementById('chart-container'))
      this.chart2 = echarts.init(document.getElementById('chart-container2'))
      this.chart3 = echarts.init(document.getElementById('chart-container3'))
      this.hosList()
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.chart2.resize()
        this.chart3.resize()
      })
    },
    beforeDestroy () {
      window.removeEventListener('resize', () => {
        this.chart.resize()
        this.chart2.resize()
        this.chart3.resize()
      })
    },
    methods: {
      changeData (data) {
        this.new_queryParam.startTime = data.startTime
        this.new_queryParam.endTime = data.endTime
        this.getToTal()
      },
      emptsearch () {
        this.new_queryParam.startTime = dateFormatter(new Date(), 'yyyy-MM-dd')
        this.new_queryParam.endTime = dateFormatter(new Date(), 'yyyy-MM-dd')
        this.hosList()
      },
      changeHos () {
        this.getToTal()
      },
      initChart () {
        let option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              center: ['50%', '60%'],
              radius: ['50%', '80%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: true,
                position: 'inside', // 在饼图内部显示标签
                formatter: '{d}%',
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: true,
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' },
              ],
            },
          ],
        }

        this.chart.setOption(option)
      },

      initChart3 () {
        let option = {
          title: {
            text: '',
            subtext: '',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: [
              'rose 1',
              'rose 2',
              'rose 3',
              'rose 4',
              'rose 5',
              'rose 6',
              'rose 7',
              'rose 8',
            ],
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: false, readOnly: false },
              restore: { show: false },
              saveAsImage: { show: false },
            },
          },
          series: [
            {
              name: 'Area Mode',
              type: 'pie',
              radius: [20, 100],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5,
              },
              labelLine: {
                length: 5,
                length2: 5,
              },
              data: [
                { value: 30, name: 'rose 1' },
                { value: 28, name: 'rose 2' },
                { value: 26, name: 'rose 3' },
                { value: 24, name: 'rose 4' },
                { value: 22, name: 'rose 5' },
                { value: 20, name: 'rose 6' },
                { value: 18, name: 'rose 7' },
                { value: 16, name: 'rose 8' },
              ],
            },
          ],
        }

        this.chart3.setOption(option)
      },

      initChart2 () {
        let option = {
          title: {
            text: '',
            subtext: '',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            show: false,
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        this.chart2.setOption(option)
      },

      async getToTal () {
        this.initChart2()
        this.initChart()
        this.initChart3()
        return
        try {
          this.loading = true
          let params = {
            ...this.new_queryParam,
            beginDate: this.new_queryParam.startTime,
            endDate: this.new_queryParam.endTime,
          }
          let res = await this.api.printApi.dashboard(params)
          console.log('数据', res)
          this.loading = false
          this.all = res.data || {}
          this.machineVoList = res.data.machineVoList || []
          this.equiVo = res.data.equiVo || []
          this.deptVo = res.data.deptVo || []
        } catch (error) {
          this.loading = false
        }
      },

      hosList () {
        this.getToTal()
        return
        this.api.printApi.selData().then((data) => {
          this.option = data.data
          if (data.data && data.data.length) {
            this.new_queryParam.hosId = data.data[0].id
            this.getToTal()
          }
        })
      },

      onSearch () {
        this.pagination.page = 1
        this.getList()
      },
      async getList () {
        try {
          this.loading = true
          let params = {
            year: this.currentYear,
            weeks: this.currentWeekNumber,
            page: this.pagination.page,
            size: this.pagination.size,
            hosId: this.hosId,
          }
          let res = await this.api.nurseApi.nurseSchedule(params)
          let list = res.data.records || []
          this.pagination.total = res.data.total
          this.tableData = list
          this.loading = false
          console.log('排班数据', res)
        } catch (error) {
          this.loading = false
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  p {
    margin: 0;
    padding: 0;
  }

  .book-card {
    padding: 0px 10px;
    min-width: 180px;
    font-size: 20px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #409eff;
    color: #fff;
  }
  .file-box {
    background: #409eff;
    padding: 10px 0;
    width: 280px;
  }
  .book-card-title {
    font-size: 30px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .book2-card {
    width: 180px;
    margin-bottom: 20px;
  }

  .book3-card {
    height: 70px;
    margin-bottom: 20px;
    font-size: 16px;
  }

  .book-radius {
    border-radius: 5px;
    overflow: hidden;
  }
  .book-color1 {
    background: #e6a23c;
  }
  .book-color2 {
    background: #67c23a;
  }
  .book-color3 {
    background: rgba(84, 112, 198, 1);
  }

  .storge-card {
    .storge-card-box {
      width: 150px;
      display: flex;
      flex-direction: column;
      .con1-card {
        margin: 10px 0;
      }
    }
  }
  .system-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .con1-card {
      margin-bottom: 50px;
    }
  }
  .chart-wrapper {
    padding: 10px;
    position: relative;
    .chart-container-no {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: white;
      height: 100%;
    }
  }
  .chart-wrapper2 {
    padding: 10px;
    flex: 1;
    position: relative;
    .chart-container2-no {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: white;
    }
  }

  .card-scroll-box {
    min-height: 200px;
    padding: 20px 0;
  }

  .box-card {
    margin-bottom: 20px;

    .box-card-title {
      font-size: 20px;
      position: relative;
      font-weight: 700;
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .box-card-title::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 5px;
      height: 20px;
      transform: translateY(-50%);
      background: #409eff;
    }
    .con1 {
      flex-wrap: wrap;
    }
    .con1-card {
      padding: 0px 10px;
      min-width: 200px;
      height: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #409eff;
      color: #fff;
      border-radius: 5px;
      .num {
        font-size: 40px;
        font-weight: 700;
        display: inline-block;
        padding: 0 20px;
      }
    }
    .con1-card1 {
      background: #e6a23c;
    }
    .con1-card3 {
      background: rgba(84, 112, 198, 1);
    }
    .con1-card4 {
      background: #67c23a;
    }
    .con1-card2 {
      border-radius: 5px;
      overflow: hidden;
      font-size: 16px;
      text-align: center;
      color: #fff;
      .con1-card2-one {
        background: rgba(84, 112, 198, 1);
        padding: 0px 50px;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .con1-card2-two {
        background: #67c23a;
        padding: 0px 50px;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .num {
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
  .table-title {
    font-size: 14px;
    margin: 15px 0;
    span {
      margin-right: 20px;
    }
  }
  button {
    margin: 5px;
  }
  .page-footer {
    position: sticky;
    bottom: 0;
    padding: 0 14px 14px;
    background-color: #fff;
    z-index: 10;
  }
  .el-pagination {
    padding: 2px 5px;
    margin: 15px 0 0 0;
    font-weight: normal;
    text-align: end;
  }
  .el-tag {
    margin: 0 5px;
  }
</style>
